<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>El lenguaje hacker</title>
</head>

<body>
    <h1>El lenguaje hacker</h1>
    <p>Escribe un texto:</p>
    <input type="text" id="input"/>
    <button onclick="convertirTexto()">Convertir a lenguaje hacker!</button>
    <p>Texto en lenguaje hacker:</p>
    <p id="output"></p>
    
    <script>
        const entrada = document.getElementById("input");
        const salida = document.getElementById("output");
        
        function convertirTexto() {
            const diccionario = { 'a': '4', 'b': 'I3', 'c': '[', 'd': ')', 'e': '3', 'f': '|=', 'g': '&', 'h': '#', 'i': '1', 'j': ',_|', 'k': '>|', 'l': '1', 'm': '^^', 'n': '^/', 'o': '0', 'p': '|*', 'q': '(_,)', 'r': 'I2', 's': '5', 't': '7', 'u': '(_)', 'v': '|/', 'w': 'VV', 'x': '><', 'y': 'j', 'z': '2', '1': 'L', '2': 'R', '3': 'E', '4': 'A', '5': 'S', '6': 'b', '7': 'T', '8': 'B', '9': 'g', '0': 'o' };

            let texto = entrada.value.toLowerCase();
            let textoHacker = "";

            for (let c of texto) {
                if (c in diccionario) {
                    textoHacker += diccionario[c];
                } else {
                    textoHacker += c;
                }

                salida.innerHTML = textoHacker;
            }
        }
    </script>
</body>

</html>